<template>
	<view class="refund">
		<view class="dy-card" style="display: flex; flex-direction: column; height: 70vh;padding: 35rpx;">
			<u-checkbox-group v-model="checkboxValue" placement="column" @change="checkboxChange">
				<u-checkbox :customStyle="{marginBottom: '18px'}" v-for="(item, index) in checkboxList" :key="index"
					:label="item" :name="item">
				</u-checkbox>
			</u-checkbox-group>
		</view>


		<u-button class="refund-btn" v-if="orderInfo.orderState == 2" @click="refundHandle" type="error"
			text="退款"></u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderInfo: {},
				goodsInfo: {},
				checkboxValue: [],
				checkboxList: [
					'买多了/买错了',
					'与商家协商一致退款',
					'计划有变，暂时不需要了',
					'电话/发消息联系不上商家',
					'朋友/网上评价不好',
					'预约不到合适的时间',
					'其他'
				]
			}
		},
		onLoad(options) {
			this.orderId = options.orderId
			this.mallOrderId = options.mallOrderId
		},
		onShow() {
			this.loadDetail()
		},
		methods: {
			checkboxChange(val) {
				console.log(val)
			},
			loadDetail() {
				this.$u.api['order/getOrderMallById']({
					mallOrderId: this.mallOrderId
				}).then(res => {
					this.orderInfo = res.data.data.orderMall
					this.loadGoodsDetail()
				})
			},
			loadGoodsDetail() {
				this.$u.api['goods/findGoodsDetail']({
					goodsMallId: this.orderInfo.goodsId
				}).then(res => {
					this.goodsInfo = res.data.data.goodsMall
				})
			},
			refundHandle() {
				const options = {
					outOrderNo: this.mallOrderId,
					refundInfo: {
						reason: this.checkboxValue
					},
					goodsList: [{
						goodsId: this.goodsInfo.dyItemId,
						goodsType: 1,
						quantity: 1
					}],
					success: (res) => {
						uni.showToast({
							icon: 'none',
							title: '发起退款成功'
						})
					},
					fail: (res) => {
						uni.showToast({
							icon: 'none',
							title: '退款失败'
						})
					},
					complete: (res) => {
						uni.navigateBack()
					},
				}
				tt.applyRefund(options);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.refund {
		min-height: 100vh;
		position: relative;
		padding: 30rpx;
		box-sizing: border-box;

		&-btn {
			position: absolute;
			bottom: 100rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 680rpx;
		}
	}
</style>